<template>
    <el-form ref="contentForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>

        <el-form-item label="标题" prop="content_title">
            <el-input v-model="ruleForm.content_title" />
        </el-form-item>

        <el-form-item label="作者" prop="content_author">
            <el-input v-model="ruleForm.content_author" />
        </el-form-item>

        <el-form-item label="分类">
            <el-select v-model="ruleForm.content_navigate" placeholder="请选择">
                <el-option v-for="item in navs.result" :key="item.nav_id" :label="item.nav_text"
                    :value="item.nav_text" />
            </el-select>
        </el-form-item>

        <el-form-item label="时间" required>
            <el-col :span="11">
                <el-form-item prop="content_create_time">
                    <el-date-picker v-model="ruleForm.content_create_time" type="date" label="" placeholder="开始"
                        style="width: 100%" disabled />
                </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
                <span class="text-gray-500"></span>
            </el-col>
        </el-form-item>

        <el-form-item label="内容介绍">
            <WangEditor @handleBlurxxxx="addWangEditorContent" :contentxxx="content"></WangEditor>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="addContent(contentForm)">发布内容</el-button>
            <el-button @click="resetForm(contentForm)">重置</el-button>
        </el-form-item>

    </el-form>
</template>
<script lang="ts" setup>
// 导入富文本框组件
import WangEditor from '../../components/WangEditor.vue'
// 引入处理html字符串的插件
import {escape, unescape}  from 'html-escaper'
// 导入格式化时间插件
import moment from "moment";
// 导入消息提示框
import { ElMessage } from 'element-plus';
// 导入定义数据的方法
import { ref, reactive, onMounted } from 'vue';
// 导入表单组件对象
import type { FormInstance, FormRules } from 'element-plus';
// 导入相关接口
import { contentAddApi, contentDetailApi, navListApi,contentUpdateApi } from '../../http/request';
// 导入创建路由方法
import { useRouter } from 'vue-router';
// 定义路由
const $router = useRouter();
// 定义变量
let content_id: any = ref("");
// 获取token
let token: any = localStorage.getItem('token');
// 定义内容表单实例
const contentForm = ref<FormInstance>();
// 定义对象记录表单提交的数据
const ruleForm = reactive({
    content_title: '', // 内容标题
    content_author: '', // 内容作者
    content_create_time: '',// 内容创建时间
    content_text: '',// 内容介绍
    content_navigate: '分类', //分类
    file: ''// 内容封面
})
// 设置表单约束
const rules = reactive<FormRules>({
    // 标题
    content_title: [
        { required: true, message: '请输入内容名称', trigger: 'blur' }
    ],
    // 作者
    content_author: [
        {
            required: true,
            message: '请输入作者',
            trigger: 'change',
        },
    ],
    // 创建时间
    content_create_time: [
        {
            type: 'date',
            required: true,
            message: '请选择一个时间',
            trigger: 'change',
        },
    ],
    // 描述文字
    content_text: [
        { required: true, message: '请输入内容解析', trigger: 'blur' },
    ],
})
// 设置时间（默认）
ruleForm.content_create_time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
// 获取富文本框的内容
// 编写添加内容方法
// escape('<p>')
// unescape('&lt;p&gt;p&lt;p&gt;')
const addWangEditorContent = (result: any) => {
    console.log("富文本框的内容:", result)
    // 记录富文本输入框（整合html的标点符号）
    // console.log(escape(result.content))
    ruleForm.content_text = escape(result.content);
}
// 定义变量传值给富文本框
let content = ref("")

const addContent = async (formObj: FormInstance | undefined) => {
    if (!formObj) return
    await formObj.validate(async (valid, fields) => {
        if (valid) {
            let { content_title, content_author, content_text, file, content_navigate } = ruleForm;
            let formData = new FormData();
            formData.append("token", token);
            formData.append('content_author', content_author);
            formData.append('content_navigate', content_navigate);
            formData.append('content_text', content_text);
            formData.append('photo', file);
            formData.append('content_title', content_title);
            formData.append("fileType", "IMAGE");
            if (content_id.value) {
                // 修改内容
                formData.append("content_id", content_id.value)
                contentUpdateApi(formData)
                    .then(
                        (data: any) => {
                            // console.log('--->:',data);
                            if (data.code == 200) {
                                // 重置表单
                                formObj.resetFields();
                                // 延迟300ms跳转页面
                                let timeout = setTimeout(() => {
                                    $router.push({ path: '/content/list' });
                                    clearTimeout(timeout);
                                }, 300)
                                // 提示
                                ElMessage({
                                    message: data.msg,
                                    type: 'success',
                                });
                            } else {
                                // 提示
                                ElMessage({
                                    message: data.msg,
                                    type: 'warning',
                                });
                            }
                        }
                    ).catch(
                        err => {
                            console.log(err)
                        }
                    )
            } else {
                // 发布内容
                contentAddApi(formData)
                    .then(
                        (data: any) => {
                            // console.log('4.0',data)
                            if (data.code == 200) {
                                // 重置表单
                                formObj.resetFields();
                                // 延迟300ms跳转页面
                                let timeout = setTimeout(() => {
                                    $router.push({ path: '/content/list' });
                                    clearTimeout(timeout);
                                }, 300)
                                // 提示
                                ElMessage({
                                    message: data.msg,
                                    type: 'success',
                                });
                            } else {
                                // 提示
                                ElMessage({
                                    message: data.msg,
                                    type: 'warning',
                                });
                            }
                        }
                    )
                    .catch(
                        err => {
                            console.log(err)
                        }
                    )
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 编写重置内容方法
const resetForm = (formObj: FormInstance | undefined) => {
    if (!formObj) return
    formObj.resetFields()
}
// 获取内容详情
const Detailcontent = (content_id: any) => {
    // 获取内容详情
    contentDetailApi({ token, content_id: content_id.value })
        .then(
            (data: any) => {
                console.log(data)
                if (data.code == 200) {
                    let { content_title, content_author, content_create_time,content_navigate, content_text } = data.result[0];
                    ruleForm.content_title = content_title;
                    ruleForm.content_author = content_author;
                    ruleForm.content_create_time = content_create_time;
                    ruleForm.content_navigate = content_navigate;
                    ruleForm.content_text = unescape(content_text);
                    content.value = unescape(content_text);
                }
            }
        )
        .catch(
            error => {
                console.log(error);
            }
        )
}
// 记录导航
let navs: any = reactive({ result: [] })
// 初始化导航列表
const initnavList = async () => {
    // 调用导航列表接口
    await navListApi()
        .then(
            (data: any) => {
                if (data.code == 200) {
                    // console.log(data);
                    let { result } = data;
                    navs.result = result;
                }
            }
        )
}

// 调用挂载钩子函数
onMounted(() => {
    // 初始化内容
    // console.log(content_id)
    if ($router && $router.currentRoute.value.query) {
        content_id.value = $router.currentRoute.value.query.content_id
        if (content_id.value) {
            Detailcontent(content_id)
        }
    }
    // 初始化 
    initnavList();
})

</script>
<style lang="scss">
.el-upload-dragger {
    margin-bottom: 20px;
    padding-top: 0px;
    padding-bottom: 0px;

    div {
        padding: 0 !important;
        margin: 0 !important;
    }
}

.demo-ruleForm {
    ::v-deep .el-picker-panel__body {
        z-index: 100000000000;
        background-color: #ccc;
    }
}
</style>